<template>
    <!-- 面包屑 -->
    <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>
            <a href="/">网格管理</a>
        </el-breadcrumb-item>
        <el-breadcrumb-item>逻辑网格</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 左右布局 -->
    <div class="common-layout">
        <el-container>
            <el-aside width="240px" style="margin-top: 15px;">
                <!-- {{ selectedDepartInfo }} -->
                {{ tableData }}
                <!-- 放树形的地方 -->
                <el-input v-model="filterText" style="width: 240px" placeholder="Filter keyword" />

                <el-tree ref="treeRef" style="max-width: 600px" class="filter-tree" :data="data" :props="defaultProps"
                    default-expand-all :filter-node-method="filterNode" @node-click="nodeClicked" />

            </el-aside>
            <el-main>
                <div style="border:1px solid black; padding: 15px;">
                    <!-- 搜索表单 -->
                    <el-form :inline="true" :model="searchForm" class="demo-form-inline">
                        <el-form-item label="上级网格名称">
                            <!-- 这里放级联组件 -->
                            <el-cascader :options="data" :props="props1" clearable @change="cascaderChanged" />
                        </el-form-item>
                        <!-- <el-form-item label="上级网格名称">
                            <el-input v-model="searchForm.ParentLogicGridName" placeholder="请输入上级网格名称" clearable />
                        </el-form-item> -->

                        <el-form-item label="逻辑网格名称">
                            <el-input v-model="searchForm.LogicGridName" placeholder="请输入逻辑网格名称" clearable />
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="search">搜索</el-button>
                        </el-form-item>
                    </el-form>

                </div>
                <div style="border:1px solid black; padding: 15px;">
                    <el-button type="success" @click="add">
                        添加
                    </el-button>
                    <!-- 表格区域 -->
                    <el-table :data="tableData" style="width: 100%">
                        <el-table-column type="index" label="序号" width="100" />
                        <el-table-column prop="departmentName" label="部门名称" width="150" />
                        <el-table-column prop="logicGridName" label="网格名称" width="150" />
                        <el-table-column prop="parentLogicGridName" label="父级网格名称" width="150" />

                        <el-table-column fixed="right" label="操作" min-width="120">
                            <template #default>
                                <el-button type="danger" size="small" @click="">
                                    删除
                                </el-button>
                                <el-button type="primary" size="small">编辑</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>



            </el-main>

        </el-container>
    </div>
</template>


<script lang="ts" setup>
import { onMounted, reactive, ref, watch } from 'vue'
import { ElTree } from 'element-plus'
import axios from 'axios';
import { de } from 'element-plus/es/locales.mjs';

//搜索区域
//表格数据
const tableData = ref([])

//查询表格数据
const search = () => {
    axios.get('http://localhost:5111/api/Logical/GetLogicGrid', { params: searchForm }).then(res => {
        tableData.value = res.data.data
    })
}
//级联
const props1 = {
    checkStrictly: true,
    label: 'departName',
    value: 'id',

}

const cascaderChanged = (value: any) => {
    console.log(value)
    searchForm.ParentId = value[value.length - 1]
}


const searchForm = reactive({
    ParentId: 0,
    LogicGridName: ''
})


interface Tree {
    [key: string]: any
}

const filterText = ref('')
const treeRef = ref<InstanceType<typeof ElTree>>()

const defaultProps = {
    children: 'children',
    label: 'departName',
}

watch(filterText, (val) => {
    treeRef.value!.filter(val)
})

const filterNode = (value: string, data: Tree) => {
    if (!value) return true
    return data.departName.includes(value)//搜索字段
}

const data = ref([])
const selectedDepartInfo = reactive({
    id: 0,
    departName: ''
})

const setTreeData = () => {
    axios.get('http://localhost:5111/api/Department/GetDepartmentTree').then(res => {
        data.value = res.data.data
    });
}

//树形菜单节点被点击事件
const nodeClicked = (data: any) => {
    selectedDepartInfo.id = data.id
    selectedDepartInfo.departName = data.departName
}
onMounted(() => {
    setTreeData();
    search();
})
</script>